<script>
import config from '../config'
import Carousel from '../components/Carousel.vue'

export default {
  name: 'HomeView',

  data () {
    return {
      linkBanner: [],
      topArticles: [],
      shop: {},
      shopBrief: {},
      communityBrief: {},
      communityArticles: [],
      cdn: config.cdn,
      all: 5,
      index: 1
    }
  },

  components: {
    Carousel
  },

  computed: {
    banner() {
      return this.linkBanner.map(function(item, index) {
        return {
          'link': item.address,
          'imgSrc': `http://image.fit-start.co/home_banner_${++index}.png`
        }
      })
    }
  },

  methods: {
    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PAGE_CONFIG', { page: 'home' })
        .then(data => {
          this.linkBanner = data.link_banner
          this.shop = data.link_shop[0]
          this.topArticles = data.home_top
          this.communityArticles = data.home_community
          this.communityBrief = data.brief_community[0]
          this.shopBrief = data.brief_shop[0]
        })
    }
  },

  beforeMount() {
    this.loadPageConfig()
  }
}
</script>

<template>
  <div id="home-view">
    <div class="block-content" style="background: #000; height: 850px; position: relative">
      <carousel :images="banner" :interval="3000"></carousel>
      <div class="container clearfix" style="display: none; padding: 0px; position: absolute; height: 540px; top: 0px; left: 50%; margin-left: -540px;">
        <!-- float news -->
        <div class="news-content clearfix">
          <div class="news-header"></div>
          <ul class="news fs-list">
            <li v-for="article in topArticles">
              <div class="item thumbnail-left">
                <a class="thumbnail" :href="article.link">
                  <img :src="`${cdn}/${article.cover}`" >
                </a>
                <p><a :href="article.link" target="_blank">{{ article.name }}</a></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div>
        <img src="../../static/images/home/index-1.png" style="width: 100%;" />
      </div>
      <div>
        <img src="../../static/images/home/index-2.png" style="width: 100%;" />
      </div>
      <div>
        <img src="../../static/images/home/index-3.png" style="width: 100%; margin-bottom: 20px;" />
      </div>
      <div style="text-align: center;">
        <img src="../../static/images/home/index-4.png" style="width: 70%; margin-left: 5%;" />
      </div>
      <div style="text-align: center;">
        <img src="../../static/images/home/index-5.png" style="width: 70%; margin-left: 5%;" />
      </div>
      <div style="text-align: center;">
        <img src="../../static/images/home/index-6.png" style="width: 70%; margin-left: 5%;" />
      </div>
      <div style="text-align: center;">
        <img src="../../static/images/home/index-7.jpg" style="width: 70%; margin-left: 5%; margin-top: 30px;" />
      </div>
      <div style="text-align: center;">
        <img src="../../static/images/home/index-8.png" style="width: 100%; margin-top: 40px; margin-bottom: 100px;" />
      </div>
      <div style="text-align: center;">
        <router-link to="/products/5"style="display: inline-block; margin-bottom: 100px;">
          <img src="../../static/images/home/index-btn.png" alt="" style="width: 60%; margin: 0 auto;">
        </router-link >
      </div>

    </div>

    

    <!-- <a :href="shop.address" class="btn center-block">
      <img src="http://image.fit-start.co/home_shop.png" style="width: 100%;" />
    </a> -->

    <!-- <!-- on line-->
    <div class="online-block">
      <div class="container">
        <div class="graphy-list"></div>
        <div class="graphy-info"></div>
      </div>
    </div>

    <!-- off line -->
    <div class="offline-block">
      <div class="graphy-list"></div>
      <div class="graphy-info"></div>
    </div> -->

  </div>
</template>

<style>
@import "../../static/styles/home.css";
</style>
